<!--
  -  Copyright 2020-2021 Huawei Technologies Co., Ltd.
  -
  -  Licensed under the Apache License, Version 2.0 (the "License");
  -  you may not use this file except in compliance with the License.
  -  You may obtain a copy of the License at
  -
  -      http://www.apache.org/licenses/LICENSE-2.0
  -
  -  Unless required by applicable law or agreed to in writing, software
  -  distributed under the License is distributed on an "AS IS" BASIS,
  -  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  -  See the License for the specific language governing permissions and
  -  limitations under the License.
  -->

<template>
  <div class="app_detail common_bg">
    <div
      class="common_title"
      style="width:100%"
    >
      {{ $t('store.introduction') }}
    </div>
    <div class="app_info_div">
      <div class="app_icon">
        <img
          :src="appIconPath"
          alt=""
        >
      </div>
      <div class="app_info">
        <div class="div_title">
          <el-tooltip
            class="item"
            effect="light"
            :content="currentData.name"
            placement="right-start"
          >
            <p
              class="app_title"
            >
              {{ currentData.name }}
            </p>
          </el-tooltip>
          <el-rate
            v-model="score"
            disabled
            text-color="#ff9900"
            score-template="{value}"
          />
        </div>
        <div class="app_version">
          <select
            class="drop-down"
            v-model="currentData"
            v-show="pathSource==='index'"
            @change="updateData"
          >
            <option
              v-for="(data, index) in tableData"
              :value="data"
              :key="index"
            >
              {{ data.version }}
            </option>
          </select>
          <span v-show="pathSource==='myapp'">{{ currentData.version }}</span>
          <span class="fg " />
          <span>{{ currentData.provider }}</span>
          <span class="fg" />
          <span>{{ downloadNum }}{{ this.$t('store.downloadNum') }}</span>
        </div>
        <p class="app_desc">
          {{ currentData.shortDesc }}
        </p>
        <p class="app_tag clearfix">
          <span class="industry">
            {{ currentData.industry }}
          </span>
          <span class="architecture">
            {{ currentData.affinity }}
          </span>
          <span class="type">
            {{ currentData.type }}
          </span>
          <span class="deployMode">
            {{ currentData.deployMode==='container'?$t('store.deployContainer'):$t('store.deployVM') }}
          </span>
        </p>
      </div>
      <div class="app_score">
        <p class="score_btn">
          <el-button
            class="batchProButton"
            @click="download(currentData)"
          >
            {{ $t('store.download') }}
          </el-button>
        </p>
        <p
          class="score_btn"
          v-show="ifSubscribe"
        >
          <el-button
            class="subscribeButton"
            @click="beforeBuyIt()"
          >
            {{ $t('order.subscribe') }}{{ this.price }}{{ $t('order.price') }}
          </el-button>
        </p>
      </div>
    </div>
    <div
      class="app_content"
    >
      <div>
        <ul class="list_top clear">
          <li
            @click="activeName='appDetail'"
            :class="{'appDetail_active':activeName==='appDetail','appDetail_comment':activeName==='comment',
                     'appDetail_vedio':activeName==='vedio' || activeName==='appShow' || activeName==='meao',
                     'appDetail_comment_meao_no_appShow':ifExperience===false && activeName==='meao'}"
          >
            <span>
              {{ $t('store.introduction') }}
            </span>
          </li>
          <div
            v-if="activeName !=='appDetail' && activeName !== 'comment'"
            class="horizontal-cell"
          >
            <p
              class="link-right"
            />
          </div>

          <li
            @click="activeName='comment'"
            :class="{'comment_active':activeName==='comment','comment_default':activeName==='appDetail',
                     'comment_default_appShow_meao':ifSynchronize === true && ifExperience===true && activeName==='appShow',
                     'comment_default_appShow_nomeao':ifSynchronize === false && activeName==='appShow',
                     'comment_default_no_appShow_meao':ifSynchronize === false && ifExperience===false && activeName==='vedio',
                     'comment_default_meao_noAppShow':ifExperience === false && activeName==='meao',
                     'comment_default_vedio_noAppShow':ifExperience === false && ifSynchronize === true && activeName ==='vedio'}"
          >
            <span>
              {{ $t('store.comments') }}
            </span>
          </li>

          <div
            v-if="activeName!=='appShow'&& ifSynchronize===false && ifExperience===true && activeName !=='comment'"
            class="horizontal-cell"
          >
            <p
              class="link-right"
            />
          </div>
          <div
            v-if="activeName!=='appShow'&& ifSynchronize===false && ifExperience===false && activeName ==='appDetail'"
            class="horizontal-cell"
          >
            <p
              class="link-right"
            />
          </div>
          <div
            v-if="activeName!=='appShow'&& ifExperience === true && ifSynchronize===true && activeName !=='comment'"
            class="horizontal-cell"
          >
            <p
              class="link-right"
            />
          </div>

          <li
            v-if="ifExperience"
            @click="activeName='appShow'"
            :class="{'appShow_active':activeName==='appShow',
                     'appShow_no_active':activeName !=='appShow',
                     'appShow_default_meao':activeName ==='vedio',
                     'appShow_default':activeName==='comment',
                     'appShow_default3':activeName==='meao',
                     'appShow_default3':ifSynchronize===false && activeName==='vedio',
                     'appShow_default_vedio':ifSynchronize===true && activeName==='vedio'}"
          >
            <span>
              {{ $t('store.showOnline') }}
            </span>
          </li>
          <div
            v-if="activeName!=='meao'&& ifExperience === true && ifSynchronize===true && activeName !=='appShow'&& activeName !=='vedio'"
            class="horizontal-cell"
          >
            <p
              class="link-right"
            />
          </div>
          <div
            v-if="activeName ==='meao'&& ifExperience === true && ifSynchronize===true && activeName !=='appShow'&& activeName !=='vedio'"
            class="horizontal-cell"
          >
            <p
              class="link-right"
            />
          </div>
          <div
            v-if="activeName ==='appDetail'&& ifExperience === true && ifSynchronize===false"
            class="horizontal-cell"
          >
            <p
              class="link-right"
            />
          </div>
          <div
            v-if="activeName ==='comment'&& ifExperience === true && ifSynchronize===false"
            class="horizontal-cell"
          >
            <p
              class="link-right"
            />
          </div>
          <div
            v-if="ifSynchronize===true && ifExperience===false && activeName !=='comment' && activeName !=='vedio'"
            class="horizontal-cell"
          >
            <p
              class="link-right"
            />
          </div>
          <li
            @click="activeName='vedio'"
            :class="{'vedio_active': ifSynchronize == true &&activeName==='vedio',
                     'vedio_active_no_Meao': ifSynchronize == false && activeName==='vedio',
                     'vedio_default_appshow':ifSynchronize===false && ifExperience===true && activeName ==='appShow',
                     'vedio_default_appshow_meao':ifSynchronize===true && ifExperience===true && activeName ==='appShow',
                     'vedio_default':activeName ==='meao',
                     'vedio_default':ifExperience===true && ifSynchronize == true && activeName ==='appDetail',
                     'vedio_default_noMeao': ifExperience===true && ifSynchronize == false &&activeName ==='appDetail',
                     'vedio_default_no_AppshowMeao':ifSynchronize===false && ifExperience===false && activeName==='appDetail',
                     'vedio_default2_appShow_meao': ifExperience===true && ifSynchronize == true &&activeName==='meao',
                     'vedio_default2_no_AppshowMeao':ifSynchronize===false && ifExperience===false && activeName==='comment',
                     'vedio_default2_comment_no_Meao':ifSynchronize===false && ifExperience===true && activeName==='comment',
                     'vedio_default2_meao_no_Appshow':ifExperience===false && activeName==='meao',
                     'vedio_default2_comment_no_Appshow':ifExperience===false && ifSynchronize ===true && activeName==='comment'}"
          >
            <span>
              {{ $t('store.demo') }}
            </span>
          </li>
          <div
            v-if="ifSynchronize===true && ifExperience === true && activeName !=='vedio' && activeName !=='meao'"
            class="horizontal-cell"
          >
            <p
              class="link-right"
            />
          </div>
          <div
            v-if="ifSynchronize===true && ifExperience===false && activeName !=='vedio'&& activeName !=='meao'"
            class="horizontal-cell"
          >
            <p
              class="link-right"
            />
          </div>
          <li
            v-if="ifSynchronize"
            @click="activeName='meao'"
            :class="{'meao_active':activeName==='meao','meao_default':activeName ==='appShow',
                     'meao_default_comment_noappShow':ifExperience === false && activeName ==='comment',
                     'meao_default_vedio_appShow':activeName ==='vedio',
                     'meao_default_vedio_appDetail':activeName ==='appDetail',
                     'meao_default_comment':activeName ==='comment'}"
          >
            <span>
              {{ $t('store.synchronizeToMeao') }}
            </span>
          </li>
          <li
            class="last_li"
            :class="{'appShow_active':ifSynchronize == true && activeName==='meao',
                     'last_default':ifSynchronize == true && activeName!=='meao',
                     'last_default2':ifSynchronize == true && activeName==='meao',
                     'appShow_active':ifSynchronize == false && activeName==='vedio',
                     'last_default_vedio':ifSynchronize == false && activeName!=='vedio',
                     'last_default2_vedio':ifSynchronize == false && activeName==='vedio'}"
          >
            <span />
          </li>
        </ul>
      </div>
      <div
        class="container_div"
        :class="{'container_div_active':activeName!=='appDetail'}"
      >
        <appIntroduction
          v-if="activeName==='appDetail'"
          :source="this.source"
          ref="appIntroduction"
        />
        <appComments
          v-if="activeName==='comment'"
          :app-id="this.appId"
          :current-data="this.currentData"
          ref="appComments"
        />
        <appShowOnline
          v-show="activeName==='appShow'"
          :package-id="this.packageId"
          :app-id="this.appId"
          :if-experience="this.ifExperience"
          ref="appShowOnline"
        />
        <synchronizeMeao
          v-if="activeName==='meao'"
          :package-id="this.packageId"
          :current-data="this.currentData"
          ref="synchronizeMeao"
        />
        <appVideo
          v-if="activeName==='vedio'"
          :player-options="this.playerOptions"
          ref="appVideo"
        />
      </div>
    </div>
    <el-dialog
      :visible.sync="isShowDownload"
      :show-close="false"
      center
    >
      <div class="appDownload_top">
        <p class="appDownload_top_circle" />
        <p class="appDownload_top_title">
          {{ $t('store.downloadImage') }}
        </p>
      </div>
      <el-radio-group
        v-model="isDownloadImage"
        @change="handleSlect()"
        class="down_radio"
      >
        <el-radio :label="false">
          {{ $t('store.noNeed') }}
        </el-radio>
        <p class="p_bot">
          <em class="el-icon-warning" />
          {{ $t('store.downloadImageTip') }}
        </p>
        <el-radio :label="true">
          {{ $t('store.need') }}
        </el-radio>
        <p class="p_bot">
          <em class="el-icon-warning" />
          {{ $t('store.downloadImageTip2') }}
        </p>
      </el-radio-group>
      <span
        slot="footer"
        class="downloadAppBtn"
      >
        <el-button
          @click="cancelImage(currentData)"
          class="footer-button"
        >{{ $t('atp.cancel') }}</el-button>
        <el-button
          class="footer-button"
          @click="confirmImage(currentData)"
        >{{ $t('atp.confirm') }}</el-button>
      </span>
    </el-dialog>
    <!-- 订购弹框 -->
    <el-dialog
      width="30%"
      :visible.sync="showSubDialog"
      :show-close="false"
    >
      <div
        class="buyTitle"
      >
        <p class="title_icon" />
        <p class="title">
          {{ $t('myApp.subscribe') }}
        </p>
      </div>
      <div class="buy_content">
        <el-form>
          <el-form-item
            :label="$t('order.appNameLabel')"
          >
            <p class="val_span">
              {{ currentData.name }}
            </p>
          </el-form-item>
          <el-form-item
            :label="$t('order.subPrice')"
          >
            <p class="val_span">
              {{ price }}{{ $t('myApp.price') }}
            </p>
          </el-form-item>
          <el-form-item
            :label="$t('system.address')"
          >
            <el-select
              v-model="mechostIp"
              :placeholder="$t('common.choose')"
              style="width: 260px;"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span
        slot="footer"
        class="btnRigthPadding"
      >
        <el-button
          @click="showSubDialog = false,btnLoading = false"
          class="footer-button"
        >{{ $t('common.cancel') }}</el-button>
        <el-button
          @click="confirmToBuy"
          class="footer-button"
          :loading="btnLoading"
        >{{ $t('common.confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import appIntroduction from './AppIntroduction.vue'
import appComments from './AppComments.vue'
import appVideo from './AppVideo.vue'
import appShowOnline from './AppShowOnline.vue'
import synchronizeMeao from './SynchronizeMeao.vue'
import {
  getAppDetailTableApi,
  downloadAppPackageApi,
  URL_PREFIX,
  getAppListApi,
  myApp,
  subscribe
} from '../../tools/api.js'
import { INDUSTRY, TYPES, MEAO } from '../../tools/constant.js'
import commonUtil from '../../tools/commonUtil.js'
export default {
  name: '',
  components: {
    appIntroduction,
    appComments,
    appVideo,
    appShowOnline,
    synchronizeMeao
  },
  data () {
    return {
      MEAO: MEAO,
      activeName: 'appDetail',
      ifSubscribe: true,
      ifExperience: false,
      ifSynchronize: false,
      canDownload: false,
      userId: sessionStorage.getItem('userId'),
      details: '',
      appId: '',
      tableData: [],
      isDownloadImage: false,
      isShowDownload: false,
      currentData: {},
      comments: {
        score: 0,
        message: ''
      },
      source: '',
      appIconPath: '',
      playerOptions: {
        muted: false,
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        language: 'en',
        aspectRatio: '16:9',
        sources: []
      },
      language: localStorage.getItem('language'),
      pathSource: sessionStorage.getItem('pathSource'),
      packageId: '',
      downloadNum: 0,
      limit: 100,
      offset: 0,
      name: '',
      ip: '',
      nodePort: '',
      experienceData: [
        {
          serviceName: '',
          nodePort: '',
          mecHost: ''
        }
      ],
      btnInstantiate: false,
      btnClean: true,
      deployStatus: 'NOTDEPLOY',
      workStatus: '',
      instantiateInfo: '',
      displayDom: false,
      version: '',
      showSynchronize: false,
      customColor: '#1ececa',
      huaweiper: 0,
      jiuzhouyunper: 0,
      startSync: false,
      hwMeAO: false,
      jzyMEAO: false,
      hwinterval: '',
      jzyinterval: '',
      showlun: false,
      showSubDialog: false,
      options: [],
      mechostIp: '',
      mechostCity: '',
      role: sessionStorage.getItem('userNameRole'),
      price: 0,
      btnLoading: false,
      score: '',
      appType: JSON.parse(sessionStorage.getItem('appstordetail'))
    }
  },
  watch: {
    tableData: function (val) {
      if (Object.keys(this.currentData).length === 0 && this.currentData.constructor === Object && (this.tableData.length !== 0)) {
        this.currentData = this.tableData.sort((a, b) => new Date(b.createTime).getTime() - new Date(a.createTime).getTime())[0]
        this.ifExperience = this.currentData.experienceAble
        this.source = this.currentData.details
        this.checkProjectData()
      }
      return ''
    },
    '$i18n.locale': function () {
      this.language = localStorage.getItem('language')
      this.checkProjectData()
    }
  },
  beforeRouteLeave (to, from, next) {
    sessionStorage.setItem('fromPath', from.path)
    next(true)
  },
  methods: {
    beforeBuyIt () {
      if (sessionStorage.getItem('userNameRole') === 'tenant' || sessionStorage.getItem('userNameRole') === 'admin') {
        this.showSubDialog = true
        subscribe.getMechosts(this.appId, this.packageId).then(res => {
          this.options = []
          if (res.data && res.data.data.length > 0) {
            res.data.data.forEach(item => {
              let obj = {}
              obj.value = item.mechostIp
              obj.label = item.mechostCity
              this.options.push(obj)
            })
          } else {
            this.$message.warning(this.$t('order.noNodes'))
          }
        }).catch(error => {
          console.log(error)
        })
      } else {
        this.$message.warning(this.$t('system.guestPrompt'))
      }
    },
    confirmToBuy () {
      for (let item of this.options) {
        if (this.mechostIp === item.value) {
          this.mechostCity = item.label
        }
      }
      let param = {
        'appId': this.appId,
        'mecHostIp': this.mechostIp,
        'appPackageId': this.packageId,
        'appName': this.currentData.name,
        'mecHostCity': this.mechostCity
      }
      if (this.mechostIp !== '') {
        this.btnLoading = true
        subscribe.createOrder(param).then(res => {
          this.$message({
            duration: 2000,
            message: this.$t('order.subSuccess'),
            type: 'success'
          })
          this.$router.push('/orders')
        }).catch((error) => {
          let defaultMsg = this.$t('order.subFail')
          commonUtil.showTipMsg(this.language, error, defaultMsg)
          this.showSubDialog = false
        })
      } else {
        this.$message.warning(this.$t('order.chooseArea'))
      }
    },
    getTableData () {
      let userId = null
      if (this.pathSource === 'myapp') {
        userId = sessionStorage.getItem('userId')
      }
      getAppDetailTableApi(this.appId, userId, this.limit, this.offset).then(res => {
        let data = res.data
        data.forEach(item => {
          if (this.pathSource !== 'myapp' && item.status === 'Published') {
            this.ifExperience = item.experienceAble
            this.packageId = item.packageId
          }
        })
        this.handleTableTada(data)
        if (Object.keys(this.currentData).length === 0 && this.currentData.constructor === Object && (this.tableData.length !== 0)) {
          this.currentData = this.tableData.sort((a, b) => new Date(b.createTime).getTime() - new Date(a.createTime).getTime())[0]
          this.source = this.currentData.details
          this.appIconPath = URL_PREFIX + 'apps/' + this.currentData.appId + '/packages/' + this.currentData.packageId + '/icon'
          this.ifExperience = this.currentData.experienceAble
          if (sessionStorage.getItem('userNameRole') === 'tenant' && this.userId !== this.currentData.userId) {
            this.ifSynchronize = false
          }
          this.checkProjectData()
        }
      })
    },
    handleTableTada (data) {
      data.forEach(item => {
        let newDateBegin = this.dateChange(item.createTime)
        item.createTime = newDateBegin
        let size = (Number(item.size) / 1024).toFixed(2)
        if (size >= 1024) {
          item.size = (size / 1024).toFixed(2) + ' MB'
        } else {
          item.size = size + ' KB'
        }
        this.tableData.push(item)
        if (item.demoVideoName) {
          let val = {
            type: 'video/mp4',
            src: URL_PREFIX + 'apps/' + this.appId + '/demoVideo'
          }
          this.playerOptions.sources.push(val)
        }
      })
    },
    updateData () {
      this.ifExperience = this.currentData.experienceAble
      this.source = this.currentData.details
      this.appIconPath = URL_PREFIX + 'apps/' + this.currentData.appId + '/packages/' + this.currentData.packageId + '/icon'
      this.checkProjectData()
    },
    dateChange (dateStr) {
      if (dateStr) {
        let date = new Date(Date.parse(dateStr))
        let Y = date.getFullYear()
        let M = date.getMonth() + 1
        let D = date.getDate()
        let H = date.getHours()
        let m = date.getMinutes()
        let s = date.getSeconds()
        return Y +
          '-' +
          (M > 9 ? M : '0' + M) +
          '-' +
          (D > 9 ? D : '0' + D) +
          ' ' +
          (H > 9 ? H : '0' + H) +
          ':' +
          (m > 9 ? m : '0' + m) +
          ':' +
          (s > 9 ? s : '0' + s)
      }
    },
    cancelImage (row) {
      this.isDownloadImage = false
      this.isShowDownload = false
    },
    confirmImage (row) {
      if (this.appType.deployMode === 'vm' || this.currentData.deployMode === 'qcow2') {
        this.$message.warning(this.$t('system.downloadTimeTip'))
      }
      downloadAppPackageApi(this.appId, row, this.isDownloadImage)
      this.isShowDownload = false
      this.isDownloadImage = false
    },
    downloadImage (currentData, row) {
      if (this.currentData.deployMode === 'vm' || this.currentData.deployMode === 'qcow2') {
        this.isShowDownload = true
      } else {
        this.isDownloadImage = false
        downloadAppPackageApi(this.appId, row, this.isDownloadImage)
      }
    },
    download (row) {
      if (sessionStorage.getItem('userId') === this.currentData.userId || sessionStorage.getItem('userNameRole') === 'admin') {
        this.downloadImage(this.currentData, row)
        this.getAppData()
      } else {
        this.$message.warning(this.$t('system.downloadPrompt'))
      }
    },
    checkProjectData () {
      INDUSTRY.forEach(itemFe => {
        if (this.language === 'cn') {
          if (this.currentData.industry === itemFe.labelen) {
            this.currentData.industry = itemFe.labelcn
          }
        } else {
          if (this.currentData.industry === itemFe.labelcn) {
            this.currentData.industry = itemFe.labelen
          }
        }
      })
      TYPES.forEach(itemFe => {
        if (this.language === 'cn') {
          if (this.currentData.type === itemFe.labelen) {
            this.currentData.type = itemFe.labelcn
          }
        } else {
          if (this.currentData.type === itemFe.labelcn) {
            this.currentData.type = itemFe.labelen
          }
        }
      })
    },
    getAppData () {
      getAppListApi(this.appId).then(
        (res) => {
          this.score = res.data.score
          this.downloadNum = res.data.downloadCount
          if (!res.data.free) {
            this.price = res.data.price
          }
        },
        () => {
          this.$message({
            duration: 2000,
            type: 'warning',
            message: this.$t('promptMessage.getAppFail')
          })
        }
      )
    },
    getMyAppData () {
      myApp.getPackageDetailApi(this.appId, this.packageId).then(res => {
        let data = res.data
        let newDateBegin = this.dateChange(data.createTime)
        data.createTime = newDateBegin
        let size = (Number(data.size) / 1024).toFixed(2)
        if (size >= 1024) {
          data.size = (size / 1024).toFixed(2) + ' MB'
        } else {
          data.size = size + ' KB'
        }
        this.tableData.push(data)
        if (data) {
          this.source = data.details
        }
      })
    },
    getAppDetailApi () {
      myApp.getAppDetailApi(this.appId).then(res => {
        let data = res.data.data
        this.score = data.score
        this.downloadNum = data.downloadCount
      })
    }
  },
  mounted () {
    this.language = localStorage.getItem('language')
    let params = this.$route.params.item
      ? this.$route.params.item
      : JSON.parse(sessionStorage.getItem('appstordetail'))
    this.details = params
    this.price = this.details.price
    this.appId = this.details.appId
    this.packageId = this.details.packageId
    this.ifExperience = this.details.experienceAble
    if (this.details.score) {
      this.score = this.details.score
      this.downloadNum = this.details.downloadCount
    }
    if (this.details.packageId) {
      this.packageId = this.details.packageId
      if (this.pathSource === 'myapp') {
        this.ifSubscribe = false
        this.source = this.details.details
        this.getMyAppData()
      }
    }
    this.appIconPath = URL_PREFIX + 'apps/' + this.appId + '/packages/' + this.packageId + '/icon'
    this.getTableData()
    this.checkProjectData()
    this.getAppDetailApi()
    if ((sessionStorage.getItem('userNameRole') === 'guest')) {
      this.ifSynchronize = false
    } else {
      this.ifSynchronize = true
    }
  }
}
</script>

<style lang="less">
.app_detail{
  padding: 0 13.18%;
  color: #fff;
  p{
    margin-bottom: 0;
  }
  .title_top{
    padding: 60px 0 20px !important;
    position: relative;
    font-size: 26px;
    color: #5D3DA0;
  }
  .el-dialog{
    text-align: left;
    width: 535px;
  }
  .el-dialog__header{
    padding:10px;
  }
  .el-dialog__footer{
    padding-top:23px;
    padding-right: 36px;
  }
  .appDownload_top{
    display: flex;
    padding: 12px 40px 28px;
    .appDownload_top_circle{
      width: 9px;
      height: 9px;
      border-radius: 50%;
      margin-top: 10px;
      margin-right: 10px;
      background: #43F6AD ;
    }
    .appDownload_top_title{
      font-size: 18px;
      color: #fff;
    }
  }
  .down_radio{
    padding: -10px 40px;
    width: 400px;
    text-align: left;
    .el-radio{
      width: 350px;
      margin-bottom: 20px;
      .el-radio__label{
        font-size: 16px;
        color: #fff;
      }
      .el-radio__input.is-checked + .el-radio__label{
        color: #fff;
      }
    }
    .p_bot{
      width: 360px;
      margin:0 0 20px 28px;
      color: #fff;
      line-height: 20px;
      font-size: 12px;
    }
  }
  .app_info_div{
    border-radius: 16px;
    background: rgba(46,20,124,0.7);
    padding: 20px 0 20px 70px;
    display: flex;
    align-items: center;
    .app_icon{
      width: 130px;
      height: 130px;
      border-radius: 8px;
      padding: 2%;
      display: flex;
      justify-content: center;
      background: rgba(255,255,255,0.8);
      img{
        width: 100%;
        height: 100%;
        border-radius: 12px;
      }
    }
    .app_info{
      width: calc(100% - 610px);
      padding: 0 20px;
      word-wrap: break-word;
      min-width: 450px;
      .div_title{
        display: flex;
        .app_title{
          font-size: 36px;
          color: #fff;
          margin-bottom: 4px;
          font-weight: bold;
          max-width: 212px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .el-rate{
          text-align: left;
          line-height: 86px;
          .el-rate__icon{
            font-size: 22px;
            margin: 0 0 0 6px;
          }
        }
      }
      .app_version{
        height: 24px;
        line-height: 24px;
        .drop-down{
          top:-2px;
          margin-right: 5px;
          border-radius: 4px;
          background:rgba(255,255,255,0.3) ;
          border: none;
          color: #fff;
          option{
            color: #4e3494;
          }
        }
        .fg{
          display: inline-block;
          width: 2px;
          height: 15px;
          background: #A1A7E6;
          margin: 0 10px;
          position: relative;
          top: 1px;
        }
      }
      .app_desc{
        margin: 15px 0;
        line-height: 24px;
      }
      .app_tag{
        span{
          float: left;
          padding: 4px 10px;
          background:#4E3494;
          margin-right: 10px;
          border-radius: 4px;
        }
        .industry{
          background-size: contain;
          color: #FFB800;
        }
        .architecture{
          background-size: contain;
          color: #16E9EF;
        }
        .type{
          background-size: contain;
          color: #9374FF;
        }
        .deployMode{
          background-size: contain;
          color: #FF7C50;
        }
      }
    }
    .app_score{
      width: 31%;
      text-align: right;
      float: right;
      .score_btn{
        width: 100%;
        margin-bottom: 0;
        font-size: 14px;
        float: right;
        .batchProButton{
          margin-top: 10px;
          text-align: center;
          padding: 8px 20px;
          border-radius: 25px !important;
          color: #5E40C8;
          font-size: 18px;
          background:#fff;
          border: none;
          .el-button--primary{
            font-size: 20px;
            background-color: #fff;
            border: none;
            color: #FFFFFF;
          }
        }
        .batchProButton:hover{
          color: #fff;
          font-size: 18px;
          background:#5E40C8;
        }
        .subscribeButton:hover{
          color: #fff;
          font-size: 18px;
          background:#5E40C8;
        }
        .subscribeButton{
          margin-top: 20px;
          padding: 8px 20px;
          text-align: center;
          border-radius: 25px !important;
          border: none;
          color: #5E40C8;
          font-size: 18px;
          background: #fff;
        }
      }
    }
  }
  .app_content{
    border-radius: 0 16px 16px 16px;
    margin-top: 38px;
    .horizontal-cell{
      padding: 12px 0;
      float: left;
      width: 2px;
      height: 50px;
      background-color: #4E3494;
    }
    .separator{
      position: relative;
      height: 100%;
    }
    .separator:after{
      position: absolute;
      top:10px;
      height: calc(100% - 2px);
      left:0;
      content: '';
      width:0;
    }
    .list_top{
      margin-top: 58px;
      li{
        float: left;
        height: 50px;
        line-height: 50px;
        cursor: pointer;
        span{
          display: block;
          background: #4E3494;
          width: 100%;
          height: 100%;
          padding: 0 26px;
          font-size: 16px;
          color: #fff;
          transition: all 0.1s;
        }
      }
      .last_li{
        cursor: default;
      }
      em{
        display: inline-block;
        width: 19px;
        height: 22px;
        position: relative;
        top: 4px;
        margin-right: 10px;
      }
      .appDetail_active{
        background: #4E3494;
        border-radius: 16px 0 0 0;
        transition: all 0.1s;
        span{
          background: rgba(46,20,124,0.8);
          border-radius: 16px 16px 0 0;
          color: #fff;
          font-size: 18px;
          transition: all 0.1s;
        }
      }
      .appDetail_comment{
        background: rgba(46,20,124,0.8);
        border-radius: 16px 0 0 0;
        span{
          background: #4E3494;
          border-radius: 16px 0 16px 0;
          transition: all 0.1s;
        }
      }
      .appDetail_comment_meao_no_appShow{
        background: #fff;
        border-radius: 16px 0 0 0;
        span{
          background: #d4d1ec;
          border-radius: 16px 0 0 0;
          transition: all 0.1s;
        }
      }
      .appDetail_vedio{
        background: rgba(46,20,124,0.8);
        border-radius: 16px 0 0 0;
        span{
          background: #4E3494;
          border-radius: 16px 0 0 0;
          transition: all 0.1s;
        }
      }
      .comment_active{
        background: #4E3494;
        transition: all 0.1s;
        span{
          background: rgba(46,20,124,0.8);
          border-radius: 16px 16px 0 0;
          color: #fff;
          font-size: 18px;
          transition: all 0.1s;
        }
      }
      .comment_default{
        background: rgba(46,20,124,0.8);
        border-radius: 0 16px 0 0;
        transition: all 0.1s;
        span{
          background: #4E3494;
          border-radius: 0 0 0 16px;
          transition: all 0.1s;
        }
      }
      .comment_default_appShow_meao{
        background: rgba(46,20,124,0.8);
        span{
          background: #4E3494;
          border-radius: 0 0 16px 0;
          transition: all 0.1s;
        }
      }
      .comment_default_appShow_nomeao{
        background: rgba(46,20,124,0.8);
        span{
          background: #4E3494;
          border-radius: 0 0 16px 0;
          transition: all 0.1s;
        }
      }
      .comment_default_meao_noAppShow{
        background: rgba(46,20,124,0.8);
        span{
          background: #4E3494;
          border-radius: 0 0 0 0;
          transition: all 0.1s;
        }
      }
      .comment_default_no_appShow_meao{
        background: rgba(46,20,124,0.8);
        span{
          border-radius: 0 0 16px 0;
        }
      }
      .comment_default_vedio_noAppShow{
        background: rgba(46,20,124,0.8);
        span{
          background: #4E3494;
          border-radius: 0 0 16px 0;
        }
      }
      .appShow_default_vedio{
        background: #fff;
        span{
          background: #d4d1ec;
          border-radius: 0 0 0 0;
        }
      }
      .comment_default_meao{
        background: #fff;
        span{
          background: #d4d1ec;
          border-radius: 0 0 0 0;
        }
      }
      .last_li.last_active{
        background: #fff;
        span{
          background: #f5f6f8;
          border-radius: 0 0 0 0;
        }
      }
      .last_li.last_default{
        background: transparent;
        span{
          background: transparent;
          border-radius: 0 0 0 16px;
          transition: all 0.1s;
        }
      }
      .last_li.last_default2{
        background: transparent;
        span{
          background: transparent;
          border-radius: 0 0 0 16px;
          transition: all 0.1s;
        }
      }
      .last_li.last_default_vedio{
        background: transparent;
        span{
          background: transparent;
          border-radius: 0 0 0 16px;
          transition: all 0.1s;
        }
      }
      .last_li.last_default2_vedio{
        background: transparent;
        span{
          background: transparent;
          border-radius: 0 0 0 16px;
          transition: all 0.1s;
        }
      }
      .appShow_active{
        background: #4E3494;
        border-radius: 0 0 0 0;
        transition: all 0.1s;
        span{
          background: rgba(46,20,124,0.8);
          border-radius: 16px 16px 0 0;
          color: #fff;
          font-size: 18px;
          transition: all 0.1s;
        }
      }
      .appShow_no_active{
        background: rgba(46,20,124,0.8);
        border-radius: 0 0 0 0;
        transition: all 0.1s;
        span{
          background: #4E3494;
          border-radius: 0 0 0 0;
          transition: all 0.1s;
        }
      }
      .appShow_default{
        background: rgba(46,20,124,0.8);
        span{
          background: #4E3494;
          border-radius: 0 0 0 16px;
          transition: all 0.1s;
        }
      }
      .appShow_default_meao{
        background: rgba(46,20,124,0.8);
        span{
          background: #4E3494;
          border-radius: 0 0 16px 0;
          transition: all 0.1s;
        }
      }
      .meao_default_comment{
        background: #3e279b;
        span{
          background: #4E3494;
          border-radius: 0 16px 0 0;
          transition: all 0.1s;
        }
      }
      .appShow_default3{
        background: rgba(46,20,124,0.8);
        border-radius: 0 16px 0 0;
        transition: all 0.1s;
        span{
          background: #4E3494;
          border-radius: 0 0 16px 0;
          transition: all 0.1s;
        }
      }
      .meao_active{
        background: #4E3494;
        border-radius: 0 16px 0 0;
        transition: all 0.1s;
        span{
          background: rgba(46,20,124,0.8);
          border-radius: 16px 16px 0 0;
          color: #fff;
          font-size: 18px;
          transition: all 0.1s;
        }
      }
      .meao_default{
        background: #3e279b;
        border-radius: 0 16px 0 16px;
        transition: all 0.1s;
        span{
          background: #4E3494;
          border-radius: 0 16px 0 0;
          transition: all 0.1s;
        }
      }
      .vedio_default_appshow{
        background: rgba(46,20,124,0.8);
        border-radius: 0 16px 0 0;
        transition: all 0.1s;
        span{
          background: #d4d1ec;
          border-radius: 0 16px 0 16px;
          transition: all 0.1s;
        }
      }
      .vedio_default_appshow_meao{
        background: rgba(46,20,124,0.8);
        border-radius: 0 16px 0 0;
        transition: all 0.1s;
        span{
          background: #4E3494;
          border-radius: 0 0 0 16px;
          transition: all 0.1s;
        }
      }
      .meao_default_comment_noappShow{
        background: #3e279b;
        border-radius: 0 0 0 16px;
        span{
          background: #4E3494;
          border-radius: 0 16px 0 0;
        }

      }
      .meao_default_vedio_noappShow{
        background: #f4f3f7;
        border-radius: 0 0 0 16px;
        transition: all 0.1s;
        span{
          background: #d4d1ec;
          border-radius: 0 16px 0 16px;
          transition: all 0.1s;
        }
      }
      .meao_default_vedio_appShow{
        background: rgba(46,20,124,0.8);
        border-radius: 0 16px 0 0;
        span{
          background: #4E3494;
          border-radius: 0 16px 0 16px;
          transition: all 0.1s;
        }
      }
      .meao_default_vedio_appDetail{
        background: #3e279b;
        span{
          background: #4E3494;
          border-radius: 0 16px 0 0;
          transition: all 0.1s;
        }
      }
      .vedio_active{
        background: #4E3494;
        border-radius: 0 0 0 0;
        transition: all 0.1s;
        span{
          background: rgba(46,20,124,0.8);
          border-radius: 16px 16px 0 0;
          color: #fff;
          font-size: 18px;
          transition: all 0.1s;
        }
      }
      .vedio_active_no_Meao{
        background: #4E3494;
        border-radius: 0 16px 0 0;
        transition: all 0.1s;
        span{
          background: rgba(46,20,124,0.8);
          border-radius: 16px 16px 0 0;
          color: #fff;
          transition: all 0.1s;
        }
      }
      .vedio_default{
        background: rgba(46,20,124,0.8);
        transition: all 0.1s;
        span{
          background: #4E3494;
          border-radius: 0 0 0 0;
          transition: all 0.1s;
        }
      }
      .vedio_default_noMeao{
        background: transparent;
        transition: all 0.1s;
        span{
          background: #4E3494;
          border-radius: 0 16px 0 0;
          transition: all 0.1s;
        }
      }
      .vedio_default_no_AppshowMeao{
        background: transparent;
        transition: all 0.1s;
        span{
          background: #4E3494;
          border-radius: 0 16px 0 0;
          transition: all 0.1s;
        }
      }
      .vedio_default2{
        background: #fff;
        border-radius: 0 16px 0 16px;
        transition: all 0.1s;
        span{
          background: #d4d1ec;
          border-radius: 0 16px 0 16px;
          transition: all 0.1s;
        }
      }
      .vedio_default2_appShow_meao{
        background: rgba(46,20,124,0.8);
        border-radius: 0 0 0 0;
        transition: all 0.1s;
        span{
          background: #4E3494;
          border-radius: 0 0 16px 0;
          transition: all 0.1s;
        }
      }
      .vedio_default2_no_AppshowMeao{
        background: rgba(46,20,124,0.8);
        border-radius: 0 16px 0 0;
        transition: all 0.1s;
        span{
          background: #4E3494;
          border-radius: 0 16px 0 16px;
          transition: all 0.1s;
        }
      }
      .vedio_default2_comment_no_Meao{
        background: rgba(46,20,124,0.8);
        border-radius: 0 16px 0 0;
        transition: all 0.1s;
        span{
          background: #4E3494;
          border-radius: 0 16px 0 0;
          transition: all 0.1s;
        }
      }
      .vedio_default2_meao_no_Appshow{
       background: rgba(46,20,124,0.8);
        border-radius: 0 16px 0 0;
        transition: all 0.1s;
        span{
          background: #4E3494;
          border-radius: 0 0 16px 0;
          transition: all 0.1s;
        }
      }
      .vedio_default2_comment_no_Appshow{
        background: rgba(46,20,124,0.8);
        border-radius: 0 16px 0 0;
        transition: all 0.1s;
        span{
          background: #4E3494;
          border-radius: 0 0 0 16px;
          transition: all 0.1s;
        }
      }
    }
    .link-right {
      width: 0px;
      height: 25px;
      border-right: solid #331A85 2px;
    }
  }
  .buyTitle{
    display: flex;
    padding: 15px 0 30px 40px;
    .title_icon{
      position: relative;
      top: 10px;
      height: 9px;
      width: 9px;
      background: #43F6AD;
      border-radius: 50%;
      margin-right: 10px;
    }
    .title{
      color: #fff;
      font-size: 18px;
    }
  }
  .buy_content{
    .el-form{
      background: rgba(46,20,124,0.7);
      padding-left: 70px;
    }
    .el-form-item__label{
      font-size: 16px;
    }
    .el-form-item{
      margin-bottom: 10px;
      margin-top: -10px;
    }
  }
  .downloadAppBtn{
    display: flex;
    justify-content: flex-end;
    padding:0px 20px 0 0;
    margin-top: -10px;
  }
  .btnRigthPadding{
    padding-right: 20px;
  }
  .val_span {
    line-height: 26px;
    padding-left: 71px;
    color: #fff;
    font-size: 16px;
  }
  .container_div{
    background: rgba(46,20,124,0.7);
    border-radius: 0 16px 16px 16px;
    transition: all 0.1s;
    box-shadow: 0 0 68px 5px rgba(94,24,200,0.06);
  }
}
</style>
